<template>
  <transition name="el-fade-in">
    <div v-if="visible" class="error-alert-container" :class="`error-alert-${errorType}`">
      <el-alert
        :title="errorTitle"
        :type="alertType"
        :closable="true"
        show-icon
        @close="handleClose"
      >
        <template #default>
          <div class="error-content">
            <p class="error-message">{{ errorMessage }}</p>
            
            <div v-if="errorDetails" class="error-details">
              <el-collapse>
                <el-collapse-item title="错误详情" name="details">
                  <pre class="error-details-content">{{ JSON.stringify(errorDetails, null, 2) }}</pre>
                </el-collapse-item>
              </el-collapse>
            </div>
            
            <div class="error-actions">
              <el-button
                v-if="showRetry"
                type="primary"
                size="small"
                @click="handleRetry"
              >
                <el-icon><Refresh /></el-icon>
                重试
              </el-button>
              
              <el-button
                v-if="showBack"
                size="small"
                @click="handleBack"
              >
                <el-icon><ArrowLeft /></el-icon>
                返回
              </el-button>
              
              <el-button
                v-if="showContactSupport"
                type="warning"
                size="small"
                @click="handleContactSupport"
              >
                <el-icon><Service /></el-icon>
                联系支持
              </el-button>
            </div>
          </div>
        </template>
      </el-alert>
    </div>
  </transition>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Refresh, ArrowLeft, Service } from '@element-plus/icons-vue'

export default {
  name: 'ErrorAlert',
  components: {
    Refresh,
    ArrowLeft,
    Service
  },
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    errorType: {
      type: String,
      default: 'unknown',
      validator: (value) => ['permission', 'network', 'server', 'auth', 'unknown'].includes(value)
    },
    errorMessage: {
      type: String,
      required: true
    },
    errorDetails: {
      type: [Object, String],
      default: null
    },
    showRetry: {
      type: Boolean,
      default: false
    },
    showBack: {
      type: Boolean,
      default: true
    },
    showContactSupport: {
      type: Boolean,
      default: true
    },
    autoClose: {
      type: [Boolean, Number],
      default: false  // false or milliseconds
    }
  },
  emits: ['close', 'retry', 'back', 'contact-support'],
  setup(props, { emit }) {
    const router = useRouter()
    const visible = ref(props.visible)
    let autoCloseTimer = null
    
    const errorTitle = computed(() => {
      const titles = {
        permission: '权限不足',
        network: '网络错误',
        server: '服务器错误',
        auth: '认证失败',
        unknown: '未知错误'
      }
      return titles[props.errorType] || '错误'
    })
    
    const alertType = computed(() => {
      const types = {
        permission: 'warning',
        network: 'error',
        server: 'error',
        auth: 'warning',
        unknown: 'info'
      }
      return types[props.errorType] || 'error'
    })
    
    watch(() => props.visible, (newVal) => {
      visible.value = newVal
      
      // 处理自动关闭
      if (newVal && props.autoClose) {
        const delay = typeof props.autoClose === 'number' ? props.autoClose : 5000
        autoCloseTimer = setTimeout(() => {
          handleClose()
        }, delay)
      }
    })
    
    const handleClose = () => {
      if (autoCloseTimer) {
        clearTimeout(autoCloseTimer)
      }
      visible.value = false
      emit('close')
    }
    
    const handleRetry = () => {
      emit('retry')
    }
    
    const handleBack = () => {
      if (window.history.length > 1) {
        router.go(-1)
      } else {
        router.push('/dashboard')
      }
      emit('back')
    }
    
    const handleContactSupport = () => {
      ElMessage.info('请联系系统管理员或技术支持')
      emit('contact-support')
    }
    
    return {
      visible,
      errorTitle,
      alertType,
      handleClose,
      handleRetry,
      handleBack,
      handleContactSupport
    }
  }
}
</script>

<style scoped>
.error-alert-container {
  margin: 20px 0;
}

.error-content {
  margin-top: 12px;
}

.error-message {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.6;
}

.error-details {
  margin: 16px 0;
}

.error-details-content {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.error-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* 动画 */
.el-fade-in-enter-active,
.el-fade-in-leave-active {
  transition: opacity 0.3s;
}

.el-fade-in-enter-from,
.el-fade-in-leave-to {
  opacity: 0;
}
</style>

